<template>
  <view class="content">
    <view class="payType" @click="hanlePayType(0)">
      <image
        src="../../static/huiyuan_logo.png"
        mode=""
        class="payType_image"
      ></image>
      <view class="payType_title">汇元支付</view>
      <view class="payType_state" v-if="userInfo">
        <text v-if="!userInfo.hy_auth_uid">去开通</text>
        <text v-else-if="userInfo.hy_auth_uid">已开通</text>
      </view>
      <image
        src="/static/jiantou.png"
        class="payType_arrow"
        mode="scaleToFill"
      ></image>
    </view>

    <u-modal
      v-model="hy_show"
      :content="hy_content"
      @confirm="hy_confirm"
      @cancel="hy_cancel"
      :show-cancel-button="true"
    ></u-modal>
  </view>
</template>

<script>
import api from "@/api/api.js";
import tip from "@/utils/tip.js";
export default {
  data() {
    return {
      hy_show: false,
      hy_content: "是否解除汇元支付?",
      userInfo: "",
    };
  },
  onShow() {
    this.userInfo = uni.getStorageSync("userInfo");
  },
  methods: {
    async hanlePayType(index) {
      let userInfo = uni.getStorageSync("userInfo");
      if (index == 0) {
        console.log("------汇元");
        if (userInfo && !userInfo.hy_auth_uid) {
          let res = await api.hy_bankSignPage({
            method: "post",
            query: {},
          });

          if (res.code == 0) {
            // #ifdef H5
            window.location.href = res.data;
            // #endif

            // #ifdef APP-PLUS
            plus.runtime.openURL(res.data);
            // #endif
          } else {
            tip.defaults(res.msg);
          }
        } else if (userInfo && userInfo.hy_auth_uid) {
          this.hy_show = true;
        }
      }
    },

    async hy_confirm() {
      let res = await api.hy_cancelAuth({
        method: "post",
        query: {},
      });
      if (res.code == 0) {
        tip.defaults("汇元支付解除成功");
      } else {
        tip.defaults(res.msg);
      }
    },
    hy_cancel() {
      this.hy_show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  padding: 0 30rpx;
}
.payType {
  display: flex;
  align-items: center;
  position: relative;
  width: 690rpx;
  height: 150rpx;

  background-image: url("/static/fastPay_bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  .payType_image {
    position: absolute;
    top: 30rpx;
    left: 30rpx;
    width: 90rpx;
    height: 90rpx;
  }
  .payType_title {
    margin-left: 140rpx;
    width: 160rpx;
    height: 56rpx;
    font-size: 40rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 56rpx;
  }
  .payType_state {
    margin-left: 220rpx;
    width: 160rpx;
    height: 56rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 56rpx;
  }
  .payType_arrow {
    position: absolute;
    top: 62rpx;
    right: 30rpx;
    width: 28rpx;
    height: 28rpx;
  }
}
</style>